<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>Vmodal测试</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.7/vue.min.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #menu {
            background-color: #eee;
            width: 600px;
            height: 40px;
            margin: 0 auto;
        }

        ul {
            list-style: none;
        }

        ul li {
            line-height: 40px;
            text-align: center;
            position: relative;
            float: left;
        }

        a {
            text-decoration: none;
            color: #000;
            display: block;
            width: 90px;
        }

        a:hover {
            color: #FFF;
            background-color: #666;
        }

        ul li ul li {
            float: none;
            margin-top: 2px;
            background-color: #eee;
        }

        ul li ul {
            width: 90px;
            position: absolute;
        }

        ul li:hover ul {
            display: block;
        }
    </style>
    <!--<script type="application/javascript" src="../js/vue.js"></script>-->
</head>

<body>
<div id="container">
    <h1>Vue demo</h1>
    <div id="app">
        <div id="template8">
            <input type="number" v-model="price"> <span>设置套餐价格：￥{{price}}RMB</span></div>
        <div id="template9"><span>已选服务：</span>
            <br> {{selectedService}}
        </div>
        <div id="template5">
            <ul>
                <li v-for="option in options">
                    <input type="checkbox" :value="option.id" :id="option.id" v-model="selected3" v-show="false">
                    <label :for="option.id" class="btn btn-success">{{option.value}}</label><span class="badge">RMB:{{option.price}}</span>
                </li>
            </ul>
            <span>Selected:</span></div>
    </div>
    <script>
        var vm = new Vue({
            el: '#container'
            , data: {
                checkedNames: []
                , selected3: []
                , selectedService: ''
                , options: [{
                    id: 1
                    , text: 'One'
                    , value: '服务A'
                    , price: 100
                }, {
                    id: 2
                    , text: 'Two'
                    , value: '服务B'
                    , price: 50
                }, {
                    id: 3
                    , text: 'Three'
                    , value: '服务C'
                    , price: 200
                }]
            }
            , computed: {
                selectedS: function () {
                    for (option in this.options) {
                        for (id in this.selected3) {
                            console.log('id=' + id);
                            if (option.id == id) {
                                console.log('value=' + value);
                                this.selectedService += option.value;
                            }
                        }
                    }
                    return selectedService;
                }
            }
            , methods: {},
            watch: {
                price: function () {
                    this.price = this.price.trim();
                    if (this.price < 0) this.price = '';
                }
            }
        })
    </script>
</body>

</html>
